<template>
    <div style="position:relative;width:100%;height:100%;">
        <div style="height:50px;width:400px;position:absolute;left:0;top:0;z-index:199;">
            <el-select v-model="industryList" style="width:100px;" placeholder="园区列表" @change="industrySelected">
                <el-option v-for="item in industryListTo" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div style="height:50px;width:660px;position:absolute;right:0;top:0;z-index:199;float:left;display:block;">
            <table>
                <tr>
                    <td >
                            <el-date-picker
                            v-model="dateMonth"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期" 
                            @change="getTime"
                            value-format="yyyy-MM-dd hh:mm:ss">
                            </el-date-picker>
                    </td>
                    <td>
                        <el-row>
                            <el-button type="info" plain @click="getDayData" >日</el-button>
                            <el-button type="info" plain @click="getMonthData">月</el-button>
                            <el-button type="info" plain @click="getYearData">年</el-button>
                            <!-- <el-button type="success" @click="simulate">装机容量估算</el-button> -->
                        </el-row> 
                    </td>
                    
                </tr>
            </table>
                            
                         
                  
        </div>
        <div style="width:100%;height:20px;padding-top:50px;">
            <h3>园区流量数据图</h3>
        </div>
       <div id="echartsRigthBottom" style="width:100%;height:460px;padding-left:20px;">

        </div>

        <!-- <lineGraphic :searcherId="companyId" :searcherType="companyType" :graphicTitle="comoanyName" :graphicWidth="graphicWidth" :graphicHeight="graphicHeight"></lineGraphic>-->
        <!-- <pieGraphic :industryId="industryId" :graphicDataType="graphicDataType"  
                    :graphicTitle="comoanyName" :graphicWidth="graphicWidth" 
                    :graphicHeight="graphicHeight" :companyList="companyList"
                    :companyRatioList="companyRatioList" :companyRatioDetail="companyRatioDetail"></pieGraphic> -->
        <div>
            <table style="width:100%;height:400px;">
                <tr>
                    <td stytle="width:40%;height:100%;">
                        <div id="dynamicPieGrahpic" style="height:100%"></div>
                        
                    </td>
                    <td style="width:58%;height:100%;">
                        <el-table :data="companyRatioDetail" height="380" element-loading-text="正在努力加载中..." border fit highlight-current-row style="width: 99%">
                            <el-table-column align="center" label="企业名称" width="150">
                                <template slot-scope="scope">
                                <span>{{scope.row.name}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="累计流量" width="150">
                                <template slot-scope="scope">
                                <span>{{scope.row.flowValue}}</span>
                                </template>
                            </el-table-column>
                             <el-table-column align="center" label="平均流量" width="150">
                                <template slot-scope="scope">
                                <span>{{scope.row.averageValue}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="最大压力(KPa)" width="150">
                                <template slot-scope="scope">
                                <span>{{scope.row.maxPress}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="最大温度(摄氏度)" width="150">
                                <template slot-scope="scope">
                                <span>{{scope.row.maxTemperature}}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </td>
                </tr>
            </table>
        </div>
        <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item name="1">
                <template slot="title">
                <p style="font-size:18px;">发电小时估算</p>
                </template>
                <el-form :inline="true"  class="demo-form-inline">
                    <el-form-item label="装机容量">
                        <el-input v-model="designCapacitySimulate" placeholder="装机容量">兆瓦（MW）</el-input>
                    </el-form-item>
                    <el-form-item label="兆瓦（MW）"></el-form-item>
                    <el-form-item label="热电比">
                        <el-select v-model="ratioSimulate" placeholder="热电比">
                        <el-option label="55%" value="0.55"></el-option>
                        <el-option label="60%" value="0.60"></el-option>
                        <el-option label="65%" value="0.65"></el-option>
                        <el-option label="70%" value="0.70"></el-option>
                        <el-option label="75%" value="0.75"></el-option>
                        <el-option label="80%" value="0.80"></el-option>
                        <el-option label="85%" value="0.85"></el-option>
                        <el-option label="90%" value="0.90"></el-option>
                        <el-option label="95%" value="0.95"></el-option>
                        <el-option label="100%" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getData">计算发电小时</el-button>
                    </el-form-item>
                </el-form>
                <div style="width:100px;height:440px;" id="monthTotal"></div>
                <div style="width:100px;height:440px;padding-left:50px;" id="chartDataDesc"></div>
                <div style="width:100px;height:440px;" id="typicalDataInfo"></div>
            </el-collapse-item>
            <el-collapse-item name="2">
                <template slot="title">
                <p style="font-size:18px;">节能环保分析</p>
                </template>
                <!-- （4）燃气热值（输入量）（5）蒸汽焓值（输入值） -->
                <el-form :inline="true"  style="border:2px solid gray;padding:10px;border-radius:5px;">
                    <el-form-item label="基础参数" style="font-size:20px;font-weight:800;">
                    </el-form-item>
                    <p></p>
                    <el-form-item label="燃气热值">
                        <el-input v-model="gasCalorific" placeholder="请输入燃气热值"></el-input>
                    </el-form-item>
                    <el-form-item label="单位:(MJ/NM3)"></el-form-item>
                    <el-form-item label="蒸汽焓值">
                        <el-input v-model="steamEnthalpy" placeholder="请输入蒸汽焓值"></el-input>
                    </el-form-item>
                    <el-form-item label="单位:(KJ/KG)"></el-form-item>
                    <el-button type="primary" @click="ProfitSimulate">效益估算</el-button>
                </el-form>
                <el-form :inline="true"  style="border:2px solid gray;padding:10px;border-radius:5px;margin-top:10px;">
                    <el-form-item label="运行参数" style="font-size:20px;font-weight:800;">
                    </el-form-item>
                    <p></p>
                    <el-form-item label="燃气耗量">
                        <el-input v-model="gasConsumption" ></el-input>
                    </el-form-item>
                    <el-form-item label="单位:(NM3/A)"></el-form-item>
                    <el-form-item label="供热气耗">
                        <el-input v-model="heatingGasConsumption" ></el-input>
                    </el-form-item>
                    <el-form-item label="单位:(NM3/GJ)"></el-form-item>
                    <p></p>
                    <el-form-item label="发电气耗">
                        <el-input v-model="electricalGasConsumption"></el-input>
                    </el-form-item>
                    <el-form-item label="单位:(NM3/A)"></el-form-item>
                    <el-form-item label="综合效率">
                        <el-input v-model="combinedEfficiency"></el-input>
                    </el-form-item>
                    <el-form-item label="单位:(%)"></el-form-item>
                </el-form>
                <el-form :inline="true"  style="border:2px solid gray;padding:10px;border-radius:5px;margin-top:10px;">
                    <el-form-item label="环保参数" style="font-size:20px;font-weight:800;">
                    </el-form-item>
                    <p></p>
                    <el-form-item label="节约标准煤">
                        <el-input v-model="standardCoalSave" ></el-input>
                    </el-form-item>
                    <el-form-item label="单位:(万吨/A)"></el-form-item>
                    <p></p>
                    <el-form-item label="减排CO2">
                        <el-input v-model="CO2EmissionReduce" ></el-input>
                    </el-form-item>
                    <el-form-item label="单位:(万吨/A)"></el-form-item>
                    <el-form-item label="减排粉尘">
                        <el-input v-model="dustEmissionReduce"></el-input>
                    </el-form-item>
                    <el-form-item label="单位:(万吨/A)"></el-form-item>
                    <p></p>
                    <el-form-item label="减排SO2">
                        <el-input v-model="SO2EmissionReduce"></el-input>
                    </el-form-item>
                    <el-form-item label="单位:(万吨/A)"></el-form-item>
                     <el-form-item label="减排NOx">
                        <el-input v-model="NOXEmissionReduce"></el-input>
                    </el-form-item>
                    <el-form-item label="单位:(万吨/A)"></el-form-item>
                </el-form>
            </el-collapse-item>
            </el-collapse>
    </div>
    
</template>

<script>
import{
  getStatisticsData,
  getCompanyDataByIndustryId,
  getCompanySumDataByIndustryId,
  getIndustryCalculateById,
  getIndustryDayDateOrderByDesc,
  getIndustryTypicalDateInfoById
} from '@/api/bus/sensor/sensorData'

import{
  getIndustryByUserPermission,
  getIndustryECEP
} from '@/api/bus/sensor/industry'


import TemplateLineGraphic from '../../report/templateLineGraphic'
import TemplatePieGraphic from '../../report/templatePieGraphic'
import { minor } from 'semver';
export default {
    components:{
        'lineGraphic':TemplateLineGraphic,
        'pieGraphic':TemplatePieGraphic,
    },
    data(){
        return{
            dialogFormVisible:false,
            form:{},
            industryId:'',
            startTime:'',
            endTime:'',
            companyType:'company',
            comoanyName:'园区企业流量占比',
            graphicWidth:1180,
            graphicHeight:400,
            graphicDataType:3,
            myChart:{},
            datas:[], //线图数据集合
            datasPie:[],//饼图数据集合
            oneDayData:[],
            oneMonthData:[],
            oneYearData:[],
            industryList:[],
            industryListTo:[],
            //---------曲线图数据------------
            dataXAxis:[],//X轴数据
            dataYAxis:[],//Y轴数据
            legendData:[],//数据标签
            yMax:0,
            series:[],//数据项
            //----------曲线图数据-----------
            dataType:'DAY', //日月年
            vt :'', //结束时间
            vtBefore:'',//开始时间
            //------------------------------
            companyList:[],            //园区企业列表,
            companyRatioList:[],       //园区企业占比，用于在饼图展示各企业的占比
            companyRatioDetail:[],     //企业详细占比信息，用于表数据展示
            //------------------------------
            //发电小时估算参数
            activeNames:[""],
            dataTypeSimulate:'',
            designCapacitySimulate: '100',
            ratioSimulate: '1',
            yMaxSimulate:'0',
            dataXAxisSimulate:[],
            dataYAxisSimulate:[],
            datasSimulate:[],
            myChartMonthSimulate:{},

            dataXAxisTypical:[],
            dataYAxisTypical:[],
            datasTypical:[],
            yMaxTypical:'0',

            chartDataDesc:{},
            dataDesc:[],

            typicalDataInfo:{},
            typicalData:[],
            // ------------------------------------
            gasCalorific:"100",
            steamEnthalpy:"90",
            gasConsumption:"",
            heatingGasConsumption:"",
            electricalGasConsumption:"",
            combinedEfficiency:"",
            standardCoalSave:"",
            CO2EmissionReduce:"",
            dustEmissionReduce:"",
            SO2EmissionReduce:"",
            NOXEmissionReduce:"",
            //---------------------------------------
            //时间选择器的时间
            dateDay:"",
            dateMonth:"",
            dateYear:"",
            //-------------------
            options:{
                tooltip: {
                    trigger  : 'axis',
                    formatter: function (params) {
                     
                     
                    },
                    axisPointer: {
                        animation: false,
                        type     : 'none',
                    },
                    extraCssText: 'width:220px; white-space:pre-wrap'
                },
                //解决Y轴显示不全的情况
                grid: {
                    left: 100
                },
                legend:{
                    data:'',
                },
                xAxis: {
                    type     : 'category',
                    splitLine: {
                        show: false
                    }
                },
                yAxis: {
                    type       : 'value',
                    boundaryGap: [0, '100%'],
                    splitLine  : {
                        show: false
                    },
                },
                series: [
                {
                    name     : '',
                    type     : 'line',
                    itemStyle: {
                      normal : {
                        lineStyle:{
                          color: 'red'
                        }
                      }
                    },
                    showSymbol    : false,
                    hoverAnimation: false,
                    data          : []
                }
                ]
            }
        }
    },
    created() {
        this.industryId = this.$route.query.industryId;
        
    },
    mounted() {
        this.getIndustryList();
        setTimeout(() => {
            this.drawBottom();
        }, 500);

        setTimeout(() => {
            this.drawMonthData();
        }, 1000);
        
        
    },
    methods: {
        getTime(val){
            console.log(val);
            if(val.length>1)
            {
                this.vtBefore =val[0];
                this.vt = val[1];
            }
            
        },
        getData(){
             getIndustryCalculateById(this.industryId,this.dataType,this.vtBefore,this.vt,this.ratioSimulate,this.designCapacitySimulate).then(response=>{
                this.dataXAxisSimulate=[];
                this.dataYAxisSimulate=[];
                this.datasSimulate=[];
                for (let index = 0; index < response.data.length; index++) {
                    var vt = response.data[index];
                    var timePoint='';
                    if(Number.parseFloat(this.yMaxSimulate) < Number.parseFloat(vt.data))
                    {
                        this.yMaxSimulate = vt.data;
                    }
                    // if(this.dataType == 'DAY'){
                    //     timePoint = vt.timePoint.substring(11,16);
                    //     this.dataXAxisSimulate.push(timePoint);
                    // }
                    // else if(this.dataType == 'MONTH'){
                    //      timePoint = vt.timePoint.substring(0,10);
                    //     this.dataXAxisSimulate.push(timePoint);
                    // }
                    timePoint = vt.timePoint;
                    this.dataXAxisSimulate.push(timePoint);
                    this.datasSimulate.push({
                            name : timePoint,
                            value: [timePoint,vt.data]
                        })

                }
                
                this.myChartMonthSimulate.setOption({
                    xAxis: {
                        type     : 'category',
                        splitLine: {
                            show: false
                        },
                        data:this.dataXAxisSimulate,
                        axisLabel: {
                            interval:0,
                            rotate:90
                        },
                    },
                    grid: {
                        left: 60,
                        bottom:120,
                    },
                    yAxis:{
                        data:this.dataYAxisSimulate,
                        max:this.yMaxSimulate*1.2,
                    },
                    type:{
                        type:'line',
                    },
                    series:{
                        data:this.datasSimulate
                    }
                })
            });
            setTimeout(() => {
                this.drawChartDataDesc();
            }, 200);
            setTimeout(() => {
                this.drawTypicalDataInfo();
            }, 200);
        },
        drawMonthData(){

            var chartTemp = document.getElementById('monthTotal');
            chartTemp.style.width =document.body.clientWidth*0.95+"px";
            this.myChartMonthSimulate = this.$echarts.init(document.getElementById('monthTotal'));

            this.myChartMonthSimulate.setOption({
                
                backgroundColor:'#FFFFFF',
                title: {
                    text: '累计发电小时'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data:this.dataXAxisSimulate,
                }],
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}'
                    },
                    data:this.dataYAxisSimulate,
                }],
                series: [{
                    name: '发电小时',
                    type: 'bar',
                    itemStyle:{
                        normal:{color:'#01949B'},
                    },
                    markPoint : {
                            data : [
                                {type : 'max', name : '最大值'},
                                {type : 'min', name : '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name : '月平均值'},
                                // {type : 'averageYear', name : '年平均值'}
                            ]
                        },
                    data: this.datasSimulate,
                }]

            });
        },
        handleChange(val){

                
            
        },
        industrySelected(){
            
            this.initData();

            this.industryId = this.industryList;
            if(this.industryId.length<1)
            {
                console.log('未取到园区编号！');
                return;
            }
            
            this.getDayData();
        },
        initData(){
            this.oneDayData= [];
            this.oneMonthData= [];
            this.oneYearData= [];
            this.dataXAxis= [];
            this.dataYAxis= [];
            this.legendData= [];
            this.yMax= 0;
            this.series= [];
            //将图标数据清理掉。
            this.myChart.setOption({
                    
                series:this.series
                });
            this.myChartPie.setOption({
                series:this.series
            });

        },
        getIndustryList(){
            //创建界面弹出时，将用户权限范围内的园区查询出来
            this.industryListTo=[];
            getIndustryByUserPermission().then(response=>{
                for (let index = 0; index < response.data.length; index++) {
                    var vt = response.data[index];
                    this.industryListTo.push({
                        value:vt.id,
                        label:vt.industryName
                    })
                }
            })
        },
        getIndustryId(){
            if(Number.parseInt(this.industryListTo.length) >Number.parseInt(1))
            {
                return this.industryListTo[0].value;
            }
            else
            {
                alert('未获取到相关园区数据信息');
                return "";
            }
            
            // return this.industryList[0].name;
        },
        //获取园区日累计数据，按小时展现
        getDayData(){
            if(typeof(this.industryId) === "undefined")
            {
                this.industryId = this.getIndustryId();
                if("" == this.industryId)
                {
                    return;
                }
            };
            this.dataType='DAY';
            this.myChart.setOption(this.options);
            this.vt =this.vt==""?this.getNowFormatDate(0,0,0):this.vt;
            this.vtBefore =this.vtBefore==""?this.getNowFormatDate(1,0,0):this.vtBefore; 
            this.renderCharts();
        },
        //获取园区月累计数据，按日展现
        getMonthData(){
            if(typeof(this.industryId) === "undefined")
            {
                this.industryId = this.getIndustryId();
                if("" == this.industryId)
                {
                    return;
                }
            }
            this.dataType='MONTH';
            this.myChart.setOption(this.options);
            this.datas=[];
            this.vt = this.getNowFormatDate(0,0,0);
            this.vtBefore = this.getNowFormatDate(0,1,0);

            this.renderCharts();
        },
        //获取园区年累计数据，按月展现
        getYearData(){
            if(typeof(this.industryId) === "undefined")
            {
                this.industryId = this.getIndustryId();
                if("" == this.industryId)
                {
                    return;
                }
            }
            this.dataType='YEAR';
            this.myChart.setOption(this.options);
            this.datas=[];
            this.vt = this.getNowFormatDate(0,0,0);
            this.vtOneDayBefore = this.getNowFormatDate(0,0,1);
            this.renderCharts();
        },
        renderCharts(){
                getCompanySumDataByIndustryId(this.industryId,'ALL',this.dataType,this.vtBefore,this.vt).then(response=>{
                this.companyList=[];
                this.companyRatioList=[];
                this.companyRatioDetail=[];
                //判断下数据是不是为空。
                if(response.data.length<1 || response.data[0].length<1)
                {
                    return ;
                }
                for (let index = 0; index < response.data.length; index++) {
                    
                    var vt = response.data[index];

                    this.companyList.push(vt.searchName);
                    this.companyRatioDetail.push(
                        {'name':vt.searchName,'flowValue':vt.data,'averageValue':vt.averageValue,'mixFlow':'1000','maxPress':'2','maxTemperature':'300'},
                    )

                    if(vt.searchId == 'ALL')
                    {
                        continue;
                    }else{
                        
                        this.companyRatioList.push(
                            {'name':vt.searchName,'value':vt.data,'id':vt.searchId}
                        )
                    }
                    
                    
                }

            });
            //获取线形图的数据
            getCompanyDataByIndustryId(this.industryId,'ALL',this.dataType,this.vtBefore,this.vt).then(response=>{
                this.yMax =0;
                if(response == null || response.data.length<1)
                {
                    alert('未能获取到相关数据');
                    return;
                }
                for (let index = 0; index < response.data.length; index++) {
                // for (let index = 0; index < 1; index++) {
                    var vt = response.data[index];
                    var name = response.data[index][0].searchName;
                    var companyType = response.data[index][0].searchType;
                    var datass=[];
                    this.dataXAxis=[];
                    this.dataYAxis=[];
                    
                    this.legendData.push(name);
                    for (let j = 0; j < response.data[index].length; j++) {
                        var vtt = response.data[index][j];
                        var timePoint='';
                        // if(this.dataType == 'DAY'){
                        //     timePoint = vtt.timePoint.substring(11,16);
                        // }else if(this.dataType =='MONTH')
                        // {
                        //     timePoint = vtt.timePoint.substring(0,11);
                        // }
                        timePoint = vtt.timePoint;
                        this.dataXAxis.push(timePoint);
                        this.dataYAxis.push(vtt.data);
                        if(Number.parseFloat(this.yMax) < Number.parseFloat(vtt.data))
                        {
                            this.yMax = vtt.data;
                        }
                        datass.push({
                            name : timePoint,
                            value: [timePoint,vtt.data]
                        })
                    }

                    this.series.push({
                        name     : name,
                        type     : 'line',
                        data :datass,
                        markPoint: {
                            label:{
                                show:true,
                                formatter:'{c}'
                            },
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'},
                            ]
                        },
                        lineStyle:{
                            type: companyType=='VIRTUAL'?'dashed':'solid',
                        },
                    })
                    
                }
                this.myChart.setOption(this.options);
                this.myChart.setOption({
                    xAxis: {
                        type     : 'category',
                        splitLine: {
                            show: false
                        },
                        data:this.dataXAxis,
                        axisLabel: {
                            interval:0,
                            rotate:90
                        },
                    },
                    grid: {
                        left: 60,
                        bottom:150,
                    },
                    yAxis:{
                        data:this.dataYAxis,
                        max:this.yMax*1.5,
                    },
                    type:{
                        type:'line',
                    },
                    legend:{
                        data:this.legendData
                    },
                    series:this.series
                })
            });
            setTimeout(() => {
                this.drawPie();
            }, 1000);
        },
        drawPie(){
            this.myChartPie = this.$echarts.init(document.getElementById('dynamicPieGrahpic'));
            this.myChartPie.resize();
            this.myChartPie.setOption({
                title : {
                    text: '园区企业占比',
                    subtext: '',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    x : 'center',
                    y : 'bottom',
                    data: this.companyList,
                },
                calculable : true,
                series : [
                    {
                        name:'园区企业占比',
                        type:'pie',
                        radius : [20, 110],
                        center : ['50%', '50%'],
                        roseType : 'area',
                        data:this.companyRatioList,
                        events:{
                            //为饼图添加点击事件（暂时取消此功能！1228）
                            // click : (e)=>{
                                
                            // }
                        }
                    }
                ]
            });

            //为饼图添加click事件，可以根据企业名称跳转到对应的企业详细页面
            this.myChartPie.on('click',(params)=>{
                var companyId = params.data.id;
                //查看企业详细信息图
                this.$router.push({
                path:'/bus/company/detail',
                components:'views/bus/company/detail',
                query:{
                    'companyId':companyId,
                }
                });
                
            });
            
        },
        simulate(){

            this.$router.push({
                path:'/bus/industry/simulate',
                components:'views/bus/industry/simulate',
                query:{
                    'industryId':this.industryId,
                    'dataType':this.dataType,
                    'startTime':this.vtBefore,
                    'endTime':this.vt,

                }
            });
        },
        drawBottom(){
            this.myChart= this.$echarts.init(document.getElementById('echartsRigthBottom'));
            this.myChart.setOption(
              this.options
             );
             setTimeout(() => {
                this.getDayData();
             }, 100);
            //  setTimeout(() => {
            //      this.getCompanyDayData();
            //  }, 100);
          },

          getNowFormatDate(ifOneDay,ifOneMonth,ifOneYear){
            var timestamp = Date.parse(new Date());
            var subOneHour = ifOneDay*24*60*60*1000;
            var subOneDay = ifOneMonth*30*24*60*60*1000;
            var subOneYear = ifOneYear*365*60*60*1000;

            timestamp=timestamp-subOneYear-subOneHour-subOneDay;
            var unixtimestamp = new Date(parseInt(timestamp));
            var year = 1900 + (unixtimestamp.getYear());
            var month = "0" + (unixtimestamp.getMonth()+1);
            var date = "0" + (unixtimestamp.getDate());
            var hour = "0" + (unixtimestamp.getHours());
            var minute = "0" + unixtimestamp.getMinutes();
            var second = "0" + unixtimestamp.getSeconds();
            return year + "-" + month.substring(month.length-2, month.length)  + "-" + date.substring(date.length-2, date.length)
                + " " + hour.substring(hour.length-2, hour.length) + ":"
                + minute.substring(minute.length-2, minute.length) + ":"
                + second.substring(second.length-2, second.length);
      },
      ProfitSimulate(){
          if(this.gasCalorific.length<1 || this.steamEnthalpy.length<1){
              return ;
          }
          getIndustryECEP(this.gasCalorific,this.steamEnthalpy).then(response=>{
            this.CO2EmissionReduce=response.data.co2EmissionReduce;
            this.combinedEfficiency=response.data.combinedEfficiency;
            this.dustEmissionReduce=response.data.dustEmissionReduce;
            this.electricalGasConsumption=response.data.electricalGasConsumption;
            this.gasCalorific=response.data.gasCalorific;
            this.gasConsumption=response.data.gasConsumption;
            this.heatingGasConsumption=response.data.heatingGasConsumption;
            this.NOXEmissionReduce=response.data.noxemissionReduce;
            this.SO2EmissionReduce=response.data.so2EmissionReduce;
            this.standardCoalSave=response.data.standardCoalSave;
            this.steamEnthalpy=response.data.steamEnthalpy;
          })
      },

      drawChartDataDesc(){
        var chartTemp = document.getElementById('chartDataDesc');
        chartTemp.style.width =document.body.clientWidth*0.95+"px";
        this.chartDataDesc = this.$echarts.init(document.getElementById('chartDataDesc'));

        this.chartDataDesc.setOption({
            title: {
                text: '负荷延时曲线'
            },
            tooltip: {
                trigger  : 'axis',
                formatter: function (params) {
                return params = params[0].seriesName+ '\n'+params[0].data.value[0] + '---' +parseInt( params[0].data.value[1])
                },
                axisPointer: {
                    animation: false,
                    type     : 'none',
                },
                extraCssText: 'width:220px; white-space:pre-wrap'
            },
            //解决Y轴显示不全的情况
            grid: {
                left: 60,
                bottom:150,
            },
            xAxis: {
                type     : 'category',
                splitLine: {
                    show: false
                },
                axisLabel: {
                    interval:0,
                    rotate:90
                },
            },
            
            yAxis: {
                type       : 'value',
                boundaryGap: [0, '100%'],
                splitLine  : {
                    show: false
                },
                

            },
            series: [{
                name     : '历史数据倒序',
                type     : 'line',
                itemStyle: {
                normal : {
                    lineStyle:{
                    color: 'red'
                    }
                }
                },
                showSymbol    : false,
                hoverAnimation: false,
                data          : []
            }]

        }),
        getIndustryDayDateOrderByDesc(this.industryId,this.dataType,this.vtBefore,this.vt,).then(response=>{
            this.dataDesc=[];
            for (let index = 0; index < response.data.length; index++) {
                var vt = response.data[index];
                
                this.dataDesc.push({
                    name : vt.timePoint,
                    value: [vt.timePoint,vt.data]
                    })
            }
            this.chartDataDesc.setOption({
                series:[{
                data : this.dataDesc
                }]
            })   
            });
        },

        drawTypicalDataInfo(){
            var chartTemp = document.getElementById('typicalDataInfo');
            chartTemp.style.width =document.body.clientWidth*0.95+"px";
            this.typicalDataInfo = this.$echarts.init(document.getElementById('typicalDataInfo'));
            this.typicalDataInfo.setOption({
                backgroundColor:'#FFFFFF',
                title: {
                    text: '典型日数据'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data:[],
                }],
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}'
                    },
                    data:[],
                }],
                series: [{
                    name: '典型日数据',
                    type: 'bar',
                    itemStyle:{
                        normal:{color:'#01949B'},
                    },
                    markPoint : {
                            data : [
                                {type : 'max', name : '最大值'},
                                {type : 'min', name : '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name : '月平均值'},
                                // {type : 'averageYear', name : '年平均值'}
                            ]
                        },
                    data: [],
                }]
            });
            getIndustryTypicalDateInfoById(this.industryId,this.vtBefore,this.vt).then(responseTypicalData=>{
                this.typicalData=[];
                this.dataXAxisTypical=[];
                this.dataYAxisTypical=[];
                this.datasTypical=[];
                this.yMaxTypical='0';
                var timePoint='';
                console.log(responseTypicalData);
                for (let index = 0; index < responseTypicalData.data.length; index++) {
                    var vt = responseTypicalData.data[index];
                    if(Number.parseFloat(this.yMaxTypical) < Number.parseFloat(vt.data))
                    {
                        this.yMaxTypical = vt.data;
                    }
                    timePoint = vt.timePoint;
                    this.dataXAxisTypical.push(timePoint);
                    this.typicalData.push({
                        name : vt.timePoint,
                        value: [vt.timePoint,vt.data]
                        })
                }
                this.typicalDataInfo.setOption({
                    xAxis: {
                        type     : 'category',
                        splitLine: {
                            show: false
                        },
                        data:this.dataXAxisTypical,
                        axisLabel: {
                            interval:0,
                            rotate:90
                        },
                    },
                    grid: {
                        left: 60,
                        bottom:120,
                    },
                    yAxis:{
                        data:this.dataYAxisTypical,
                        max:this.yMaxTypical*1.2,
                    },
                    series:{
                        data:this.typicalData
                    }
                })   
            })
        }


    }
}

</script>

<style>

</style>
